<template>
  <div class="layout">
    <Layout collapsible>
      <Header :style="{zIndex:99}">
        <Yheader :bg-color="{}"></Yheader>
      </Header>
      <Layout :style="{zIndex:98}">
        <Sider
          class="slider-menu"
          :class="menuitemClasses"
          ref="side"
          hide-trigger
          v-model="isCollapsed"
          collapsible>
          <div class="menu-box">
            <!--<div class="menu-btn">
              <Icon
                @click.native="collapsedSider"
                type="navicon-round" size="24"></Icon>
            </div>-->
            <Menu
              ref="menu"
              width="200"
              @on-select="goPage"
              :open-names="openName"
              :active-name="$route.path"
              accordion>
              <MenuItem name="/index/vipVideo">
                <Icon type="film-marker"></Icon>
                <span class="menu-txt">vip视频</span>
              </MenuItem>
              <Submenu name="1">
                <template slot="title">
                  <span>数据表格</span>
                </template>
                <MenuItem name="/index/datagrid">
                  <Icon type="grid"></Icon>
                  <span class="menu-txt">数据表格</span>
                </MenuItem>
                <MenuItem name="/index/plManage">
                  <Icon type="chatboxes"></Icon>
                  <span class="menu-txt">评论管理</span>
                </MenuItem>
              </Submenu>
              <Submenu name="2">
                <template slot="title">
                  <span>统计分析</span>
                </template>
                <MenuGroup title="使用">
                  <MenuItem name="3-1">
                    <Icon type="stats-bars"></Icon>
                    <span class="menu-txt">新增和启动</span>
                  </MenuItem>
                </MenuGroup>
                <MenuGroup title="留存">
                  <MenuItem name="3-4">
                    <Icon type="stats-bars"></Icon>
                    <span class="menu-txt">用户留存</span>
                  </MenuItem>
                </MenuGroup>
              </Submenu>
            </Menu>
          </div>

        </Sider>
        <Content>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </Content>
      </Layout>
      <Footer :style="{zIndex:99}">2017-2018 &copy; CJY</Footer>
    </Layout>
  </div>
</template>
<script>
  import Yheader from '../components/Yheader'
  export default {
    name: 'index',
    components: {Yheader},
    data() {
      return {
        isCollapsed:false,
        openName:[],
        activeName:'/index/vipVideo'
      }
    },
    computed: {
      menuitemClasses () {
        return [
            this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      goPage(name){
        this.$router.push(name);
      },
      collapsedSider () {
        this.$refs.side.toggleCollapse();

      }

    },
    mounted(){

    },
    updated(){

    }
  }
</script>

<style lang="less">
  @import "../assets/css/variable";
  .layout{
    height: 100%;
    .ivu-layout{
      height: 100%;
    }
    .ivu-layout-header{
      background: #fff;
      height: 50px;
      line-height: 1;
      padding: 0;
      box-shadow: 0 1px 10px rgba(0,0,0,.2);
    }
    .ivu-layout-content{
      position: relative;
    }
    .ivu-layout-footer{
      padding: 0;
      text-align: center;
      height: 30px;
      line-height: 30px;
      background: #fff;
      box-shadow: 0 1px 10px rgba(0,0,0,.2);
    }
    .ivu-layout-has-sider{
      flex: 1;
    }
    .slider-menu{
      height: 100%;
      overflow: hidden;
      background: #fff;
      .ivu-layout-sider-children{
        width: 220px;
        padding: 0;
        margin: 0;
        overflow-y: auto;
        transition: all .3s;
      }
      .menu-box{
        width: 200px;
        li{
          user-select: none;
          .ivu-icon{
            font-size: 16px;
            vertical-align: middle;
          }
          .menu-txt{
            vertical-align: middle;
          }
        }
        .menu-btn{
          padding-top: 10px;
          text-align: center;
          .ivu-icon{
            transition: all .2s;
            cursor: pointer;
          }
        }
        span{
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
          transition: width .2s ease .2s;
        }

      }
    }
    .collapsed-menu{
      .ivu-layout-sider-children{
        width: 84px;
      }
      .menu-box{
        width: 64px;
        .menu-btn{
          .ivu-icon{
            transform: rotate(-90deg);
          }
        }
        .ivu-menu-submenu-title{
          padding: 0;
          text-align: center;
          height: 45px;
          overflow: hidden;
          .ivu-icon:nth-child(1){
            font-size: 22px;
            line-height: 45px;
            margin: 0;
          }
          .ivu-icon:nth-child(3){
            display: none;
          }
        }

        span,.ivu-menu-item-group-title{
          width: 0;
          overflow: hidden;
        }

      }
    }
  }

</style>
